<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<jsp:include page="/WEB-INF/jsp/head.jsp"/>
	
	<script>
		function gerarMapa(){
			if( $('input[name=idFraude]:checked').val() ) {
				$('#op').attr('value','gerarMapa');
				$('#form').submit();
			}else{
				alert("Nenhuma fraude selecionada.");
			}
		}
	
		function buscarFraudes(){
			$('#op').attr('value','consultarTransacoes');
			$('#form').submit();			
		}
		
		$(document).ready(
			function() {

			$("#divTitle").html("Fraudes por Fronteira");
			$( "#dataInicial" ).datepicker();
			$( "#dataFinal" ).datepicker();
			
		});		
	</script>
</head>
<body>

	<jsp:include page="/WEB-INF/jsp/cabecalhoScaf.jsp"/>

 	<form method="GET" id="form" action="/fraudesPorFronteira">
		 <input type="hidden" name="op" id="op" >
		 
 		<c:if test="${not empty erro}">
			<br/>
			<div style="border-style:solid;border-width:2px;border-color: red; padding: 10px;">
				* ${erro}
			</div>
			<br/>
 		</c:if>

		 <div class="linha"  >
		 	<div class="coluna1">
		 		<label>Data Inicial Fraude:</label> 
		 	</div>
		 	<div class="coluna2">
		 		<input type="text" name="dataInicial" value="${dataInicial}" id="dataInicial" readonly="readonly" class="field2"/>
		 	</div>
		 	<div class="coluna1">
		 		<label>Data Final:</label>
		 	</div>
		 	<div class="coluna2">
		 		<input type="text" name="dataFinal" value="${dataFinal}" id="dataFinal" readonly="readonly" class="field2"/>
		 	</div>
		 </div>

		 <div class="linha">
		 	<div class="coluna1">
		 		<label>Tipo de Fraude:</label>
		 	</div>
		 	<div class="coluna2">
		 		<select name="tipo" class="field2">
		 			<option></option>
		 			<c:forEach items="${tipos}" var="tipo" >
			 			<option value="${tipo}" <c:if test="${tipo eq tipoFraude }">selected="selected"</c:if> >${tipo}</option>
		 			</c:forEach>
		 		</select>
		 	</div>
		 </div>	
		
		<div class="linha">
			<input type="button" onclick="buscarFraudes();" value="Buscar Fraudes">
		</div>
 	
	 	<br/>
	 	
	 	<c:if test="${not empty fraudes}">
	 		<h3>Fraudes</h3>
	 		
	 		<table width="100%" cellspacing="0" cellpadding="2" border="1" style="border-collapse:collapse;width: 700px" >
		 		<tr>
		 			<th>&nbsp;</th>
		 			<th>Nome</th>
		 			<th>Tipo</th>
		 			<th>Forma de Detecção</th>
		 			<th>Data</th>
		 		</tr>
				
				<c:forEach items="${fraudes}" var="fraude">
					<tr>
						<td width="3%"><input type="radio" name="idFraude" value="${fraude.id}" /></td>
						<td width="40%">${fraude.nome}</td>
						<td width="20%">${fraude.tipo}</td>
						<td width="20%">${fraude.formaDeteccao}</td>
						<td width="15%">${fraude.data}</td>
					</tr>
				</c:forEach>	 			 		
		 	</table>
		 	<br/>
		 	<label>Tipo de Fronteira:</label>
		 	<select name="tipoFronteira" >
		 		<option value="cidade">Cidade</option>
		 		<option value="estado">Estado</option>
		 		<option value="pais">País</option>
		 	</select>
		 	<input type="button" onclick="gerarMapa();" value="Visualizar Fronteiras">
		</c:if>
 	</form>

</body>
</html>